<template>
  <div class="home-container">
    <dv-loading v-if="loadStatus">Loading...</dv-loading>
    <template v-else>
      <!-- 标题 -->
      <TopHeader></TopHeader>

      <div class="flex" style="margin-top: 20px">
        <!-- 第三个 -->
        <div style="margin-left: 12px">
          <Third></Third>
        </div>

        <!-- 第六个 -->
        <div style="margin-left: 12px">
          <Sixth></Sixth>
        </div>
      </div>
      <div class="flex" style="margin-top: 20px">
        <!-- 第二个 -->
        <div style="margin-left: 10px">
          <Second></Second>
        </div>

        <!-- 第一个 -->
        <div style="margin-left: 10px">
          <First></First>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
// 第一個
import First from "/@/components/FirstComponent/index.vue";
import Second from "/@/components/SecondComponent/index.vue";
import Third from "/@/components/ThirdComponent/index.vue";
// import Forth from "/@/components/ForthComponent/index.vue";
// import Fifth from "/@/components/FifthComponent/index.vue";
import Sixth from "/@/components/SixthComponent/index.vue";
import TopHeader from "/@/components/TopHeader/index.vue";

import { onMounted, ref } from "vue";
import gylApi from "/@/api/index.ts";
import { useOverviewStore, useGoodsStore, useBusinessStore, useOrderStore } from "/@/store/index.ts";
const useStore1 = useOverviewStore();
const useStore2 = useGoodsStore();
const useStore3 = useBusinessStore();
const useStore4 = useOrderStore();

let loadStatus = ref(false);

onMounted(() => {
  postOverviewData();
  postGoodsData();
  postBusinessData();
  postOrderData();
});

let timer = setInterval(() => {
  postOverviewData();
  postGoodsData();
  postBusinessData();
  postOrderData();
}, 60000);

// 获取总览模块数据
const postOverviewData = () => {
  gylApi
    .getOverview()
    .then((res) => {
      if (res.code == 200) {
        // loadStatus.value = false;
        useStore1.update(res.data);
      } else {
        clearInterval(timer);
        timer = null;
      }
    })
    .catch((err) => {
      console.log(err);
      clearInterval(timer);
      timer = null;
    });
};

// 获取商品统计模块数据
const postGoodsData = () => {
  gylApi
    .getGoods()
    .then((res) => {
      // console.log(res);
      if (res.code == 200) {
        useStore2.update(res.data);
      } else {
        clearInterval(timer);
        timer = null;
      }
    })
    .catch((err) => {
      console.log(err);
      clearInterval(timer);
      timer = null;
    });
};

// 获取供货商模块数据
const postBusinessData = () => {
  gylApi
    .getBusiness()
    .then((res) => {
      // console.log(res);
      if (res.code == 200) {
        useStore3.update(res.data);
      } else {
        clearInterval(timer);
        timer = null;
      }
    })
    .catch((err) => {
      console.log(err);
      clearInterval(timer);
      timer = null;
    });
}

// 订单模块数据
const postOrderData = () => {
  gylApi
    .getOrder()
    .then((res) => {
      // console.log(res);
      if (res.code == 200) {
        useStore4.update(res.data);
      } else {
        clearInterval(timer);
        timer = null;
      }
    })
    .catch((err) => {
      console.log(err);
      clearInterval(timer);
      timer = null;
    });
}
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
</style>

